<template>
	<view>
		<!-- 公司任务 -->
		<template v-if="list.length >0">
			<u-list
				@scrolltolower="getList"
				enableBackToTop
				refresher-enabled
				refresher-background="#F2F4F6"
				refresher-threshold="50"
				:height="`${listHeight}px`"
			>
				<view class="h_list">
					<view class="h_box" v-for="(item,index) in list" :key="index">
						<view class="h_text">
							<view class="h_L">任务名称：</view>
							<view class="h_R">{{item.title}}</view>
						</view>
						<view class="h_text">
							<view class="h_L">任务内容：</view>
							<view class="h_R wmWhiteSpacePre">{{item.content}}</view>
						</view>
						<view class="h_text">
							<view class="h_L">结束时间：</view>
							<view class="h_R">{{item.end_date}}</view>
						</view>
						<nt-upload :images="item.images ? item.images : []" mode="preview"></nt-upload>
						<view class="h_hr"></view>
						<view class="h_btn" v-if="item.powerStatus.postTaskOrder == 1">
							<text @click="Jump(item.id)">接任务</text>
						</view>
						<view class="h_myorder" v-if="item.powerStatus.postTaskOrder == 2">
							<view class="wmFlexBetween">
								<view class="h_text h_text2">
									<view class="h_L">用户：</view>
									<view class="h_R">{{item.myorder.username}}</view>
								</view>
								<view class="h_text">
									<view class="h_L">提交时间：</view>
									<view class="h_R">{{item.myorder.createtime}}</view>
								</view>
							</view>
							<view class="h_text">
								<view class="h_L">备注：</view>
								<view class="h_R">{{item.myorder.remarks}}</view>
							</view>
							<view class="wmFlexBetween">
								<view class="h_text">
									<view class="h_L">状态：</view>
									<view class="h_R cF00">{{item.myorder.status_text}}</view>
									<text class="h_edit" @click="Jump(item.id)" v-if="item.myorder.review_status != 1">修改</text>
								</view>
								<view class="h_text" v-if="item.myorder.review_status == 2">
									<view class="h_L">审核备注：</view>
									<view class="h_R">{{item.myorder.review_remarks}}</view>
								</view>
							</view>
							<nt-upload :images="item.myorder.images ? item.myorder.images : []" mode="preview"></nt-upload>
							
						</view>
					</view>
				</view>
			</u-list>
		</template>
		<u-empty icon="https://cdn.uviewui.com/uview/empty/data.png" v-else></u-empty>
	</view>
</template>

<script>
import {getTasks} from "@/api"
	export default {
		data() {
			return {
				params: {
					nav_status:0,
					limit: 10,
					page: 1,
				},
				list:[],
				scrollHeight: 0,
				load_more:true,
				
			}
		},
		computed: {
			listHeight(){
				let convention = this.scrollHeight - 50;
				return convention
			}
		},
		onShow() {
			this.getList()
		},
		methods: {
			getList(){
				let that = this
				let params = that.params
				if(!that.load_more) return;
				getTasks(params).then(res => {
					let data = res.data.data;
					if(that.params.page == 1){
						that.list = []
					}
					that.list = that.list.concat(data);
					if(that.params.page >= data.last_page || that.list.length< 1){
						that.load_more = false;
					}
					that.params.page++
				})
			},
			Jump(href){
				uni.navigateTo({
					url:'/subpackage/member/pages/company-tasks/take-task?id='+href
				})
			}
		}
	}
</script>

<style lang="scss">
	page{background: #F2F4F6;}
	.cF00{color:#f00}
	.wmFlexBetween{display: flex;justify-content: space-between;}
	.wmWhiteSpacePre{white-space:pre-wrap}
	.h_edit{
		display: inline-block;
		width: 100rpx;
		height: 48rpx;
		line-height: 48rpx;
		border-radius: 4rpx;
		background: #2d7ffd;
		color: #fff;
		text-align: center;
		font-size: 26rpx;
		margin-left: 8rpx;
	}
	.h_list{
		padding: 20rpx;
		.h_box{
			border-bottom: 16rpx solid #DDDDDD;
			margin-bottom: 40rpx;
			&:last-child{border-bottom: none;}
			.h_text{
				display: flex;
				margin-bottom: 16rpx;
				font-size: 28rpx;
				.h_L{
					color: #666;
					white-space: nowrap;
				}
			}
			.h_text2{
				align-items: center;
				.h_R{
					display: flex;
				align-items: center;
					width: 100%;
					.h_name{
						width: calc(100% - 100rpx);
					}
				}
			}
			.h_hr{
				height: 2rpx;
				background: #DDDDDD;
			}
			.h_myorder{
				margin-top: 16rpx;
			}
			.h_btn{
				padding: 24rpx;
				text{
					border-radius: 6rpx;
					margin: 0 auto;
					background: #2d7ffd;
					display: block;
					width: 320rpx;
					font-size: 28rpx;
					text-align: center;
					color: #fff;
					line-height: 76rpx;
				}
			}
		}
	}
</style>
